<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2023-01-13 16:48:02
 * @LastEditors: badcandy 568197314@qq.com
 * @LastEditTime: 2023-02-18 16:48:13
 * @FilePath: /dcollege/src/components/doList.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="todo">
    <div class="icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 24 24"
        width="2rem"
        height="2rem"
      >
        <path
          d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
    <div class="content">
      <div class="title">
        <span>{{ props.name }}</span>
      </div>
      <div class="description">
        <span>{{ props.location }}</span>
      </div>
      <div class="remark">
        <span>{{ props.comment }}</span>
      </div>
    </div>
    <div class="time">
      <span>{{ props.reminderTime }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
  location: {
    type: String,
    default: "",
  },
  comment: {
    type: String || null,
    default: "无备注",
  },
  reminderTime: {
    type: String,
    default: null,
  },
});
</script>

<style lang="less" scoped>
.todo{
    position: relative;
    display:flex;
    flex-direction:row;
    margin-bottom:1rem;
}
.icon{
    position: relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.content{
    margin-left: 1rem;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    flex:1 auto;
}
.title{
    font-size:1rem;
    color:black;
}
.description{
    margin-top:.2rem;
    margin-bottom:0.5rem;
}
.time{
    font-size:0.625rem;
}
</style>